<template>
	<view class="container">
		<view class="dingdan">
			<text class="dingdan1">{{$t('dingdan.licaidingdan')}}</text>
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="licaizhong">
						<view class="uni-input">{{array[index]}}</view>
						<view class="xialaimg">
							<image src="/static/icon/xiala.png" mode=""></image>
						</view>
						</view>
					</picker>
		</view>
		
		<!-- 表头 -->
		<view class="biaotou">
			<view class="biaotou1" v-for="(item,index) in biaotou" :key="index">
				<text>{{item}}</text>
			</view>
		</view>
		<view class="list">
			<view class="biaotou1">
			<view class="biaotou2" v-for="(item,index) in biaotous">
				<view class="biaotou3">
					<text>{{item.amount}}</text>
				</view>
				<view class="biaotou3">
					<text>{{item.duration}}</text>
				</view>
				<view class="biaotou3">
				<text>{{item.timetamp}}</text>	
				</view>
				<view class="biaotou3">
					<text>{{item.timestamp}}</text>
				</view>
				<view class="biaotou3">
					<text>{{item.code}}</text>
				</view>
				<view class="biaotou4">
				<text>{{item.status}}</text>
				<text class="biaotou5" v-if="item.status=='理财中'">解锁</text>
				</view>
				
			</view>
			
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				array: [this.$t('dingdan.licaizhong'),this.$t('dingdan.jiesuo'),this.$t('dingdan.suhui')],
				biaotou: [this.$t('dingdan.shuliang'),this.$t('dingdan.zhouqi'),this.$t('dingdan.licairiqi'),this.$t('dingdan.jiesuoriqi'),this.$t('dingdan.daoqi'),this.$t('dingdan.zhuantai')],
				biaotous: [
				  {amount: '1000USDT', duration: '30天',timetamp: '2025/05/15 10:32:23', timestamp: '2025/05/15 10:32:23', code: '1500DEIO', status: '理财中'},
				  {amount: '1000USDT', duration: '30天',timetamp: '2025/05/15 10:32:23', timestamp: '2025/05/15 10:32:23', code: '1500DEIO', status: '已解锁'},
				  {amount: '1000USDT', duration: '30天',timetamp: '2025/05/15 10:32:23', timestamp: '2025/05/15 10:32:23', code: '1500DEIO', status: '已赎回'}
				]

			}
		},
		onLoad() {
		uni.setNavigationBarTitle({
		  title:  this.$t('licaidingdan'), // 必填，页面标题）
		 })		
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
		},
	}
</script>

<style>
	.container{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.dingdan{
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.dingdan1{
		font-size: 32rpx;
		font-weight: 700;
		margin-left: 20rpx;
	}
	.licaizhong{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.uni-input{
		font-size: 28rpx;
		font-weight: 700;
		margin-right: 15rpx;
	}
	.xialaimg{
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.biaotou{
		width: 96%;
		font-size: 24rpx;
		font-weight: 700;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #d7d7d7;
	}
	.list{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 15rpx;
	}
	.biaotou1{
		width: 98%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}
	.biaotou2{
		width: 96%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		padding-bottom: 40rpx;
		border-bottom: 1rpx solid #d7d7d7;
		font-size: 24rpx;
	}
	.biaotou3{
		width: 13%;
		 word-wrap: break-word; /* 允许在单词中间断开 */
		  white-space: normal; /* 允许换行 */
	}
	.biaotou4{
		width: 12%;
		display: flex;
		flex-direction: column;
	}
	.biaotou5{
		margin-top: 10rpx;
		color: #7c47d7;
	}
</style>